Component({
  properties: { // 组件的对外属性，是属性名到属性设置的映射表
    position: {
      type: String,
      value: 'fade',
    },
    show: {
      type: Boolean,
      value: false
    },
    bg: {
      type: Boolean,
      value: true,
    },
    bgclick: {
      type: Boolean,
      value: true,
    }
  },
  data: { // 组件的内部数据，和 properties 一同用于组件的模板渲染
    animationData: {}
  },
  observers: { // 组件数据字段监听器，用于监听 properties 和 data 的变化
    'show': function (val) {
      let animation = wx.createAnimation({
        duration: 200, // 动画持续时间
        timingFunction: 'linear' // 动画效果，从头到尾速度相同
      })
      if (val) {
        animation.opacity(1).left(0).top(0).step();
        this.setData({
          animationData: animation.export() // 导出动画队列。export 方法每次调用后会清掉之前的动画操作。
        })
      } else {
        switch (this.properties.position) {
          case 'fade':
            animation.opacity(0).step(); // 表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画
            break;
          case 'left':
            animation.left('-100%').step(); // left 设置left值
            break;
          case 'top':
            animation.top('-100%').step(); // top 设置top值
            break;
          case 'right':
            animation.left('100%').step(); // opacity 设置透明度
            break;
          default:
            animation.top('100%').step();
            break;
        }
        this.setData({
          animationData: animation.export()
        })
      }
    }
  },
  pageLifetimes: { // 组件所在页面的生命周期声明对象
    show() {

    },
    hide() {

    },
    resize(size) {
      // 页面尺寸变化
    }
  },
  methods: {
    // 点击背景
    closetag() {
      if (this.properties.bgclick) {
        this.setData({
          show: false
        })
        this.triggerEvent('close', {
          bb: 1
        })
      }
    },
    // 防止滑动穿透
    preventTouchMove() {
      console.log('stop');
      return
    },
    closePop() {
      this.setData({
        show: false
      })
    },
    endFun() {
      console.log('end')
    }
  }

});